<template>
  <div class="container" style="height: 100%;" ref="consDom">
    <el-row :gutter="10">
      <el-col :xs="24">
        <div ref="colDom" style="position: absolute;height: 100%;"></div>
        <el-row>
          <!-- table -->
          <el-form
            :model="queryParams"
            ref="queryForm"
            inline
            v-show="showSearch"
          >
            <!-- 设备编号 -->
            <el-form-item prop="deptId" :label="$t('device.list.label.number')">
              <treeselect
                @input="treeValueChange"
                v-model="form.deptId"
                :options="mapTreeData"
                :show-count="true"
                :flatten-search-results="true"
                placeholder="请选择或输入设备号查询"
                clearValueText=""
                noResultsText="暂无匹配的数据"
                :disableFuzzyMatching="true"
                style="width: 300px"
              />
            </el-form-item>
            <!-- 设备名称 -->
            <el-form-item :label="$t('device.list.label.name')">
              <el-input
                :placeholder="$t('device.list.input.name')"
                clearable
                v-model="queryParams.fDescription"
                @keyup.enter.native="handleQuery"
              ></el-input>
            </el-form-item>
            <!-- 在线时间 -->
            <el-form-item :label="$t('device.list.label.timer')">
              <el-date-picker
                v-model="dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                :start-placeholder="$t('device.list.date.startTime')"
                :end-placeholder="$t('device.list.date.endTime')"
                style="width: 300px;"
              ></el-date-picker>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="设备状态">
              <el-select
                v-model="queryParams.fIsOnline"
                placeholder="请选择状态"
                clearable
              >
                <el-option
                  style="text-indent:1em"
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- 查询 -->
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
                v-hasPermi="['lgsv:card:query']"
                >{{ $t('device.list.button.search') }}</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
        <el-row class="mb10" style="position:relative">
          <!-- 新增 -->
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="handleAdd"
            v-hasPermi="['lgsv:card:add']"
            v-hasRole="['admin', 'root', 'test']"
            >{{ $t('device.list.button.add') }}</el-button
          >
          <!-- 删除 -->
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['lgsv:card:remove']"
            >{{ $t('device.list.button.delete') }}</el-button
          >
          <!-- 移动设备 -->
          <el-button
            type="info"
            plain
            v-hasPermi="['lgsv:card:move']"
            :disabled="multiple"
            @click="handleShift"
          >
            <template>
              <i class="iconfont">
                &#xe713;
              </i>
              {{ $t('device.list.button.move') }}
            </template></el-button
          >
          <!-- 设备操作 -->
          <el-button
            type="success"
            plain
            :disabled="multiple"
            v-hasPermi="['lgsv:card:send']"
            @click="handleFacility"
          >
            <template>
              <i class="iconfont">
                &#xe97d;
              </i>
              {{ $t('device.list.button.handle') }}
            </template>
          </el-button>
          <!-- 导出 -->
          <!-- <el-button
            type="warning"
            plain
            icon="el-icon-download"
            :disabled="single"
            @click="handleExport"
            v-hasPermi="['system:user:export', 'lgsv:card:export']"
            >{{ $t('device.list.button.export') }}</el-button
          > -->
          <!-- 提示视图 -->
          <div class="look">
            <p style="padding:0 5px">{{ queryParams.pageSize }}条 / 页</p>
            <!-- 当前在线数量 -->
            <p style="border-left:1px solid #dcdfe6;padding:0 5px">
              <!-- 当前在线数量 -->
              <span>
                <i class="iconfont">&#xe6b4;</i>
                在线 : {{ onLine }}
              </span>
            </p>
            <!-- 当前离线数量 -->
            <p style="border-left:1px solid #dcdfe6;padding:0 5px">
              <!-- 当前在线数量 -->
              <span>
                <i class="iconfont">&#xe912;</i>
                离线 : {{ offLine }}
              </span>
            </p>
          </div>
          <!-- 隐藏搜索 刷新 显隐列工具 
        columns:显隐列做筛选功能
        -->
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getCardList"
            :columns="columns"
          ></right-toolbar>
        </el-row>
        <!-- tableData -->
        <u-table
          ref="multipleTable"
          v-loading="loading"
          tooltip-effect="dark"
          v-if="isTable"
          :max-height="tableHeight"
          :big-data-checkbox="checked"
          :row-height="storeTableHeight"
          row-key="id"
          use-virtual
          border
          fixed
          highlight-current-row
          @selection-change="handleSelectionChange"
          @current-change="handleCurrentChange"
          @sort-change="sortChange"
          :default-sort="defaultSort"
        >
          <!-- checkbox多选框 -->
          <u-table-column type="selection" width="40" align="center">
          </u-table-column>
          <!-- 设备号 -->
          <u-table-column
            prop="fNumber"
            :label="$t('device.list.table.number')"
            width="130"
            align="center"
            sortable
            v-if="columns[0].visible"
          >
          </u-table-column>
          <!-- 名称 -->
          <u-table-column
            :label="$t('device.list.table.name')"
            align="center"
            prop="fDescription"
            sortable
            v-if="columns[1].visible"
            :show-overflow-tooltip="true"
          >
          </u-table-column>
          <!-- 单位 -->
          <u-table-column
            prop="sysDept.deptName"
            :label="$t('device.list.table.unit')"
            align="center"
            sortable
            width="125"
            :sort-method="sortByDate"
            v-if="columns[2].visible"
          ></u-table-column>
          <!-- 类型 -->
          <u-table-column
            prop="lgCardType.fDescription"
            :label="$t('device.list.table.type')"
            width="85"
            align="center"
            v-if="columns[3].visible"
          >
          </u-table-column>
          <!-- 宽 * 高-->
          <u-table-column
            :label="$t('device.list.table.screen')"
            align="center"
            width="80"
            v-if="columns[4].visible"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.fWidth }} * {{ scope.row.fHeight }}</span>
            </template>
          </u-table-column>
          <!-- 状态 -->
          <u-table-column
            prop="fIsOnline"
            :label="$t('device.list.table.state')"
            align="center"
            sortable
            :sort-orders="['ascending', 'descending', null]"
            v-if="columns[5].visible"
          >
            <template slot-scope="scope">
              <div
                class="status"
                :style="{
                  color: scope.row.fIsOnline === 0 ? 'gray' : 'green'
                }"
              >
                {{ scope.row.fIsOnline === 0 ? '离线' : '在线' }}
              </div>
            </template>
          </u-table-column>
          <!-- 设备内容 -->
          <u-table-column
            prop="fNumSpace"
            label="设备内容"
            align="center"
            width="100"
            style="padding:10px"
            v-if="columns[6].visible"
          >
            <template slot-scope="scope">
              <el-popover
                placement="left"
                trigger="click"
                width="320"
                ref="popover"
                :popper-options="{ boundariesElement: 'viewport' }"
              >
                <div class="devConUlbox">
                  <div class="trainInfor" v-show="equipmentDate.length > 0">
                    <el-scrollbar style="height:155px;">
                      <el-table
                        :data="equipmentDate"
                        size="mini"
                        :show-header="false"
                        :row-style="rowStyle"
                        empty-text="暂无数据"
                        style="width: 100%"
                      >
                        <el-table-column
                          v-for="item in dirName"
                          :key="item"
                          :prop="item"
                          align="center"
                          :width="
                            item == 'station'
                              ? '50'
                              : item == 'lineName'
                              ? ''
                              : '75'
                          "
                        ></el-table-column>
                      </el-table>
                    </el-scrollbar>
                  </div>
                  <div v-show="programDate.length > 0">
                    <el-carousel
                      indicator-position="none"
                      height="290px"
                      style="padding:0 3px 3px;"
                    >
                      <el-carousel-item
                        v-for="(itemd, indexd) in programDate"
                        :key="itemd.message"
                      >
                        <h3
                          style="color:#ffffff;font-size: 14px;margin-top: 190px;"
                        >
                          节目{{ indexd + 1 }}
                        </h3>
                        <div
                          v-if="programTimeDate[indexd]"
                          style="color:#ffff00;font-weight: 700;width: 100%;position:absolute;top: 0;left:50%;transform: translateX(-50%);"
                        >
                          {{ programTimeDate[indexd].message }}
                        </div>
                        <el-scrollbar style="height:80px;">
                          <div
                            style="color:#00FF00;text-align: left;white-space:normal;max-height:80px;"
                          >
                            {{ itemd.message }}
                          </div>
                        </el-scrollbar>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                  <div v-if="!isTanKuang" style="color: #ffffff;">
                    暂无数据
                  </div>
                </div>
                <el-button
                  type="primary"
                  plain
                  slot="reference"
                  style="padding:3.5px 10px;"
                  @click="devContext(scope.row, scope.column, $event)"
                  >点击查看</el-button
                >
              </el-popover>
            </template>
          </u-table-column>
          <!-- 节目容量 -->
          <u-table-column
            prop="fNumSpace"
            :label="$t('device.list.table.capacity')"
            align="center"
            width="90"
            v-if="columns[7].visible"
          >
          </u-table-column>
          <!-- 版本 -->
          <u-table-column
            prop="fVersion"
            :label="$t('device.list.table.versions')"
            align="center"
            width="100"
            v-if="columns[8].visible"
          >
          </u-table-column>
          <!-- SSID -->
          <u-table-column
            prop="fSid"
            label="SSID"
            align="center"
            width="160"
            v-if="columns[9].visible"
          >
          </u-table-column>
          <!-- 在线时间 -->
          <u-table-column
            prop="fKeepalive"
            :label="$t('device.list.table.lastOnlineTime')"
            width="160"
            align="center"
            sortable
            show-overflow-tooltip
            v-if="columns[10].visible"
          >
          </u-table-column>
          <u-table-column
            prop="name"
            :label="$t('device.list.table.handle')"
            align="center"
            width="85"
          >
            <template slot-scope="scope">
              <!-- 编辑 -->
              <el-tooltip
                effect="dark"
                content="编辑"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="info"
                  plain
                  icon="el-icon-edit"
                  style="padding:3.5px 5px;"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['system:user:edit', 'lgsv:card:edit']"
                ></el-button>
              </el-tooltip>
              <!-- 详细 -->
              <el-tooltip
                effect="dark"
                content="详细"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="info"
                  plain
                  icon="el-icon-view"
                  style="padding:3.5px 5px;"
                  @click="handleView(scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </u-table-column>
        </u-table>
        <!-- 分页器 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getCardList"
        />
      </el-col>
    </el-row>
    <!-- 新增与修改设备对话框 -->
    <add-dialog
      ref="addDialog"
      :queryParams="queryParams"
      @dialogEvent="getCardList"
    ></add-dialog>
    <!-- 修改设备对话框 -->
    <edit-dialog ref="editDialog" @dialogEvent="getCardList"></edit-dialog>
    <!-- 移动对话框 -->
    <move-dialog
      ref="shiftDialog"
      :ids="ids"
      :depts="deptIds"
      @dialogEvent="getCardList"
    ></move-dialog>
    <!-- 设备操作对话框-->
    <handle-dialog ref="handleDialog" :handles="handles"></handle-dialog>
    <!-- 详细对话框 -->
    <descri-dialog ref="descriDialog"></descri-dialog>
  </div>
</template>
<script>
import { getDev } from '@/api/system/map'
import Treeselect from '@riophae/vue-treeselect' // import Treeselect component
import { mapState, mapMutations } from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' // import Treeselect styles
import addDialog from './addDialog/index' // import subassembly addDialog
import editDialog from './editDialog/index' // import subassembly editDialog
import moveDialog from './moveDialog/index' // import subassembly moveDialog
import handleDialog from './handleDialog/index' // import subassembly moveDialog
import descriDialog from './descriDialog/index' // import subassembly overviewDialog
import { checkPermi, checkRole } from '@/utils/permission' // 权限判断函数
import {
  cardList,
  delDevice,
  exportEquipment,
  getRecContext
} from '@/api/equipment/list' // import cardList api
export default {
  name: 'List',
  inject: ['reload'],
  components: {
    Treeselect, //注册组件
    addDialog,
    editDialog,
    moveDialog,
    handleDialog,
    descriDialog
  },
  data () {
    return {
      checked: true,
      isTanKuang: false,
      dirName: [],
      initNum: 0,
      editTimeArr: [
        {
          title: '年月日',
          options: [
            {
              id: 0,
              text: 'YYYY年MMMM月DDDD日',
              type: '%Y年%m月%d日'
            },
            {
              id: 1,
              text: 'YY年MM月DD日',
              type: '%y年%m月%d日'
            },
            {
              id: 2,
              text: 'YYYY-MMMM-DDDD',
              type: '%Y-%m-%d'
            },
            {
              id: 3,
              text: 'YY-MM-DD',
              type: '%y-%m-%d'
            },
            {
              id: 4,
              text: 'YYYY/MMMM/DDDD',
              type: '%Y/%m/%d'
            },
            {
              id: 5,
              text: 'YY/MM/DD',
              type: '%y/%m/%d'
            },
            {
              id: 6,
              text: 'YYYY.MMMM.DDDD',
              type: '%Y.%m.%d'
            },
            {
              id: 7,
              text: 'YY.MM.DD',
              type: '%y.%m.%d'
            }
          ]
        },
        {
          title: '时分秒',
          options: [
            {
              id: 0,
              text: 'HH时MM分SS秒',
              type: '%H时%M分%S秒'
            },
            {
              id: 1,
              text: 'HH:MM:SS',
              type: '%H:%M:%S'
            }
          ]
        },
        {
          title: '星期',
          options: [
            {
              id: 0,
              text: '',
              type: '星期%w'
            }
          ]
        }
      ],
      form: {
        deptId: undefined
      },
      query: {
        deptId: undefined
      },
      mapTreeData: [],
      isTable: false,
      tableHeight: 0,
      loading: true, // 遮罩层
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      isShow: true, // 是否显示
      deptOptions: undefined, // 部门树选项
      showSearch: true, // 显示搜索条件
      ids: [], // 存储checkbox选中的编号
      handles: [], // 传值给子组件的数组
      deptIds: [], //存储checkbox选中的部门Id
      deptName: undefined, // 部门名称
      currentRow: null, // 选中表格当前行
      total: 0, // 页码总条数
      deviceList: [], // 设备表格数据
      expandedKeys: [], // 默认打开的节点
      order: undefined, // ascending descending
      onLine: 0, // 在线
      offLine: 0, // 离线
      bol: true,
      defaultProps: {
        children: 'children', // 指定子树为节点对象的某个属性值
        label: 'label' // 指定节点标签为节点对象的某个属性值
      },
      dateRange: [], // 日期范围
      statusOptions: [
        {
          value: 1,
          label: '在线'
        },
        {
          value: 0,
          label: '离线'
        }
      ],
      defaultSort: {
        prop: 'fIsOnline',
        order: 'descending'
      },
      // 设备表格查询模型
      queryParams: {
        pageNum: 1, // 页码
        pageSize: 20, // 条数
        fNumber: undefined, // 设备编号
        fDescription: undefined, // 设备名称
        deptId: undefined, // 部门id
        fIsOnline: undefined // 状态
      },
      // 表格列信息
      columns: [
        { key: 0, label: `设备号`, visible: true },
        { key: 1, label: `名称`, visible: true },
        { key: 2, label: `单位`, visible: true },
        { key: 3, label: `类型`, visible: true },
        { key: 4, label: `宽 * 高`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `设备内容`, visible: true },
        { key: 7, label: `节目容量`, visible: true },
        { key: 8, label: `版本`, visible: true },
        { key: 9, label: `SSID`, visible: false },
        { key: 10, label: `在线时间`, visible: true }
      ],
      dateTime: undefined,
      equipmentDate: [],
      programDate: [],
      programTimeDate: [],
      storeTableHeight: 45
    }
  },
  mounted () {
    this.tableHeight =
      this.$refs.consDom.offsetHeight - this.$refs.colDom.offsetHeight - 80
    this.isTable = true
  },
  methods: {
    checkPermi,
    checkRole,
    rowStyle ({ row, rowIndex }) {
      if (row) {
        return { backgroundColor: '#000000' }
      }
    },
    getTime () {
      const now = new Date()
      const date = {
        year: now.getFullYear(), // 获取完整的年份 2019
        month: now.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        date: now.getDate(), //获取当前日(1-31)
        day: now.getDay(), //获取当前星期X(0-6,0代表星期天)
        hours: now.getHours(), //获取当前小时数(0-23)
        min: now.getMinutes(), //获取当前分钟数(0-59)
        sec: now.getSeconds() //获取当前秒数(0-59)
      }
      const newmonth = date.month >= 10 ? date.month : '0' + date.month
      const newdate = date.date >= 10 ? date.date : '0' + date.date
      const newhours = date.hours >= 10 ? date.hours : '0' + date.hours
      const newmin = date.min >= 10 ? date.min : '0' + date.min
      const newsec = date.sec >= 10 ? date.sec : '0' + date.sec
      let newday = date.day
      let dayCycleArray = ['日', '一', '二', '三', '四', '五', '六']
      for (let i = 0; i < 7; i++) {
        if (date.day == i) {
          newday = dayCycleArray[i]
        }
      }
      let bianYear = date.year - 2000
      this.editTimeArr[0].options[0].text =
        date.year + '年' + newmonth + '月' + newdate + '日'
      this.editTimeArr[0].options[1].text =
        bianYear + '年' + newmonth + '月' + newdate + '日'
      this.editTimeArr[0].options[2].text =
        date.year + '-' + newmonth + '-' + newdate
      this.editTimeArr[0].options[3].text =
        bianYear + '-' + newmonth + '-' + newdate
      this.editTimeArr[0].options[4].text =
        date.year + '/' + newmonth + '/' + newdate
      this.editTimeArr[0].options[5].text =
        bianYear + '/' + newmonth + '/' + newdate
      this.editTimeArr[0].options[6].text =
        date.year + '.' + newmonth + '.' + newdate
      this.editTimeArr[0].options[7].text =
        bianYear + '.' + newmonth + '.' + newdate
      this.editTimeArr[1].options[0].text =
        newhours + '时' + newmin + '分' + newsec + '秒'
      this.editTimeArr[1].options[1].text =
        newhours + ':' + newmin + ':' + newsec
      this.editTimeArr[2].options[0].text = '星期' + newday
    },
    // currDeptChange(val){
    // console.log(val)
    // if (val == null || val == undefined || val == '') {
    // 	return
    // }
    // if(val.length>8){
    // 	this.isChangeDev=false
    // 	this.queryParams.fNumber=val
    // 	this.getCardList()
    // }else{
    // 	this.isChangeDev=true
    // 	this.queryParams.fNumber=''
    // 	this.$message({
    // 		showClose: true,
    // 		message:'只能查询设备',
    // 		type: 'warning'
    // 	});
    // 	let that=this
    // 	setTimeout(function(){
    // 		that.form.deptId=undefined
    // 	})
    // }
    // },
    treeValueChange (val) {
      if (val == null || val == undefined || val == '') {
        return
      }
      // console.log(val)
      if (val.length > 8) {
        this.queryParams.fNumber = val
        this.getCardList()
      } else {
        this.queryParams.fNumber = ''
        this.$message({
          showClose: true,
          message: '只能查询设备',
          type: 'warning'
        })
        let that = this
        // setTimeout(function () {
        //   that.form.deptId = undefined
        // }, 100)
      }
    },
    // 查询部门下拉树结构
    getTreeselect () {
      getDev(this.query)
        .then(response => {
          this.mapTreeData = response.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 设备内容
    devContext (con) {
      // console.log(con.fNumber)
      // const now = new Date()
      // const date = {
      // 	year: now.getFullYear(), // 获取完整的年份 2019
      // 	month: now.getMonth() + 1, //获取当前月份(0-11,0代表1月)
      // 	date: now.getDate(), //获取当前日(1-31)
      // }
      this.equipmentDate = []
      this.programDate = []
      this.programTimeDate = []
      this.dirName = []
      // const newmonth = date.month >= 10 ? date.month : '0' + date.month
      // const newdate = date.date >= 10 ? date.date : '0' + date.date
      // this.dateTime=date.year + '年' + newmonth + '月' + newdate + '日'
      getRecContext({ fNumber: con.fNumber }).then(res => {
        if (res.code == 200) {
          // console.log(res.data)
          if (res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].mType == 20) {
                this.equipmentDate = res.data[i].stationList
              } else if (res.data[i].mType == 1) {
                this.programDate.push(res.data[i])
              } else if (res.data[i].mType == 6) {
                this.programTimeDate.push(res.data[i])
              }
            }
            // console.log(this.equipmentDate)
            //          console.log(this.programTimeDate)
            //          console.log(this.programDate)
            if (this.equipmentDate.length > 0) {
              for (let dir in this.equipmentDate[0]) {
                this.dirName.push(dir)
              }
            }

            for (let i = 0; i < this.programTimeDate.length; i++) {
              for (let k = 0; k < this.editTimeArr.length; k++) {
                for (let z = 0; z < this.editTimeArr[k].options.length; z++) {
                  this.programTimeDate[i].message = this.programTimeDate[
                    i
                  ].message.replace(
                    this.editTimeArr[k].options[z].type,
                    this.editTimeArr[k].options[z].text
                  )
                }
              }
            }
            for (let i = 0; i < this.programDate.length - 1; i++) {
              for (let j = 0; j < this.programDate.length - 1 - i; j++) {
                if (this.programDate[j].pNo > this.programDate[j + 1].pNo) {
                  let temp = this.programDate[j]
                  this.programDate[j] = this.programDate[j + 1]
                  this.programDate[j + 1] = temp
                }
              }
            }
            for (let i = 0; i < this.programTimeDate.length - 1; i++) {
              for (let j = 0; j < this.programTimeDate.length - 1 - i; j++) {
                if (
                  this.programTimeDate[j].pNo > this.programTimeDate[j + 1].pNo
                ) {
                  let temp = this.programTimeDate[j]
                  this.programTimeDate[j] = this.programTimeDate[j + 1]
                  this.programTimeDate[j + 1] = temp
                }
              }
            }
            if (this.programDate.length > 0 || this.equipmentDate.length > 0) {
              this.isTanKuang = true
            } else {
              this.isTanKuang = false
            }
          }
        }
      })
    },
    // 单位排序
    sortByDate (obj1, obj2) {
      let val1 = obj1.sysDept.deptId
      let val2 = obj2.sysDept.deptId
      return val1 - val2
    },
    // 新增Dialog
    handleAdd () {
      this.$refs.addDialog.dialogVisible = true // 打开对话框
    },
    // 设备表格数据查询
    handleQuery () {
      //  if(this.isChangeDev){
      // this.form.deptId=undefined
      //  }
      this.queryParams.pageNum = 1
      this.queryParams.fNumber = this.form.deptId
      this.getCardList()
    },
    // 删除
    handleDelete (row) {
      const fNumber = row.fNumber || this.ids
      this.$confirm('是否确认删除设备?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function () {
          // 判断是多选删除还是操作删除
          if (fNumber instanceof Array) {
            return delDevice(fNumber) // 多选
          } else {
            return delDevice([fNumber]) // 操作
          }
        })

        .then(() => {
          this.getCardList() // 重新渲染分页
          this.msgSuccess('删除成功')
        })
        .catch(err => {
          return err
        })
    },
    // 编辑Dialog
    handleUpdate (row) {
      // console.log(row)
      this.$refs.editDialog.dialogVisible = true // 打开对话框
      this.$refs.editDialog.$nextTick(() => {
        this.$refs.editDialog.title = '修改设备' // Dialog对话框标题
        this.$refs.editDialog.form = JSON.parse(JSON.stringify(row))
      })
    },
    // 导出
    handleExport () {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有设备数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function () {
          return exportEquipment(queryParams)
        })
        .then(response => {
          this.download(response.msg)
        })
        .catch(err => {
          return err
        })
    },
    // 文件上传成功处理
    handleFileSuccess (response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getCardList()
    },
    // 查询设备列表  分页请求的数据
    getCardList () {
      this.loading = true // 遮罩层
      // console.log(this.queryParams)
      cardList(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.deviceList = response.rows
          this.deviceList.forEach((item, index) => {
            this.deviceList[index]['fNumSpace'] =
              item.fRemainSpace + '/' + (item.fProgramNum + item.fRemainSpace)
          })
          this.$refs.multipleTable.reloadData(this.deviceList)
          this.total = response.total
          this.loading = false
          this.onLine = 0
          this.offLine = 0
          // 遍历统计在线和离线的数量绑定input
          for (let i = 0; i < response.rows.length; i++) {
            if (response.rows[i].fIsOnline === 1) {
              this.onLine++
            } else if (response.rows[i].fIsOnline === 0) {
              this.offLine++
            }
          }
          // console.log(this.deviceList)
          // 在线数量大于1并且数量大于2
          // if (this.onLine > 0 && response.rows.length > 2) {
          //    this.bol = false
          //  this.$nextTick(() => {
          //  this.defaultSort.order = 'descending'
          //      // this.bol = true
          //  })
          // }
          // else {
          //   this.clearState()
          // }
        }
      )
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      // selection 多选选择的每一行数据
      this.deptIds = selection.map(item => item.deptId) // 把checkbox选中的部门id赋值给deptIds数组
      this.ids = selection.map(item => item.fNumber) // 把checkbox选中的编号id赋值给ids数组
      this.handles = selection.map(item => item) // 把checkbox选中的每行数据赋值给一个新数组
      this.single = selection.length != 1
      this.multiple = !selection.length
      if (selection.length > 1) {
        this.model = true
      } else {
        this.model = false
      }
    },
    // 当前多选框选中的值
    handleCurrentChange (val) {
      this.currentRow = val
    },
    // 移动设备
    handleShift () {
      this.$refs.shiftDialog.dialogVisible = true
    },
    // 设备操作
    handleFacility () {
      this.$refs.handleDialog.dialogVisible = true
    },
    // 自定义状态排序
    sortChange (column) {
      let index = 0
      let offLine = 0
      let onLine = 0
      // console.log(column)
      if (column.prop === 'fIsOnline') {
        for (let i = 0; i < this.deviceList.length; i++) {
          index = i + 1
          if (this.deviceList[i].fIsOnline === 0) {
            // 未在线
            offLine++
          } else if (this.deviceList[i].fIsOnline === 1) {
            // 在线
            onLine++
          }
        }
        if (onLine === index) {
          // 当前页全部是在线
          // 当前表格一页全部都是在线或者未在线都清空排序条件
          this.clearState()
        } else if (offLine === index) {
          // 当前页全部是离线
          this.clearState()
        }
      }
    },
    // 清空排序
    clearState () {
      this.$refs.multipleTable.clearSort()
    },
    // 详细
    handleView () {
      this.$refs.descriDialog.dialogVisible = true
    }
  },
  computed: {
    ...mapState({
      deptId: state => state.tree.dept.id
    })
  },
  activated () {
    if (this.$store.state.deptId) {
      this.queryParams.deptId = this.$store.state.deptId
      this.query.deptId = this.$store.state.deptId // 把点击获得的id赋值给queryParams模型id
      this.$refs.addDialog.form.deptId = this.$store.state.deptId // 把点击获得的id赋值给Dialog对话框id
      this.getTreeselect()
      this.getCardList()
    }
    this.storeTableHeight = this.$store.state.tableHeight
    this.getTime()
  },
  watch: {
    // 根据名称筛选部门树
    deptName (val) {
      this.$refs.tree.filter(val)
    },
    // 默认展开tree节点
    deptOptions: {
      handler () {
        this.deptOptions.forEach(item => {
          this.expandedKeys.push(item.id)
        })
      },
      deep: true
    },
    // 'form.deptId': 'currDeptChange',
    '$store.state.deptId' (val) {
      // console.log(val)
      this.queryParams.deptId = val
      this.query.deptId = val // 把点击获得的id赋值给queryParams模型id
      this.$refs.addDialog.form.deptId = val // 把点击获得的id赋值给Dialog对话框id
      this.getTreeselect()
      this.getCardList() // 请求数据刷新分页
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.container {
  .dialog-footer {
    text-align: center;
  }
  // .el-table--border th:first-child .cell,
  // .el-table--border td:first-child .cell {
  //   padding: 0;
  // }
  // .el-table .cell {
  //   padding: 0;
  // }
  // .el-table th > .cell {
  //   padding: 0;
  // }
  // .el-table th,
  // .el-table td {
  //   padding: 0;
  // }
  .look {
    position: absolute;
    height: 33px;
    line-height: 33px;
    top: 1%;
    right: 12%;
    // margin-right: 4px;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    text-align: center;
    display: flex;
    border-radius: 3px;
  }
}
.lastLine {
  padding: 5px;
  overflow: hidden;
}
::v-deep.devConUlbox {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px;
  height: 300px;
  position: relative;
  .trainInfor {
    position: absolute;
    top: 35px;
    padding: 5px;
    z-index: 999;
    height: 160px;
    left: 0;
    width: 100%;
    background-color: #000000;
    color: red;
  }
  .el-carousel__arrow--left {
    left: 0;
    top: 200px;
  }
  .el-carousel__arrow--right {
    right: 0;
    top: 200px;
  }
  .el-table {
    // border: 1px solid red;
    background-color: #000000;
    color: red;
  }
  .el-table::before {
    height: 0;
  }
  .el-table--default th,
  .el-table--default td {
    padding: 2px 0;
    border: 1px solid #cccccc;
  }
  .el-table--medium th,
  .el-table--medium td {
    padding: 2px 0;
  }
  .el-table--small th,
  .el-table--small td {
    padding: 2px 0;
  }
  .el-table--mini th,
  .el-table--mini td {
    padding: 2px 0;
  }
  .el-form-item {
    margin-bottom: 8px;
  }
}
::v-deep.devList-top {
  display: inline-block;
  height: 45px;
  width: 380px;
  margin-left: 28px;
  display: flex;
  border-radius: 5px;
  line-height: 45px;
  span {
    font-weight: 700;
    font-size: 14px;
  }
  .el-form {
    margin-left: 13px;
  }
  .vue-treeselect__menu {
    overflow-x: auto;
    width: 297px;
  }
  .vue-treeselect div,
  .vue-treeselect span {
    box-sizing: content-box;
  }
}
</style>
